<template>
  <span
    v-for="(tag, index) in list"
    :key="index + tag.value"
    :class="[tag.closable ? 'is-closable' : '', tagStatusConfig[type][tag.value], tag.show ? '' : 'hide']"
    class="el-tag el-tag--light merak_sys_tag"
    @click="clickEl(tag)"
  >
    <span class="el-tag__content">{{ tag.label }}</span>
    <i class="el-icon el-tag__close" v-if="tag.closable" @click.stop="hClose(index)">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
        <path
          fill="currentColor"
          d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"
        ></path>
      </svg>
    </i>
  </span>
</template>
<script lang="ts" setup>
import { ref, toRaw } from "vue";
import { tagStatusConfig } from "@/config/tagStatus.ts";
import { tagsStatusProps } from "./interface.ts";
const emit = defineEmits(["handleClose", "handleClick"]);
const prop = defineProps<tagsStatusProps>();
let { type, list } = prop;

/* methods */
let hClose = ref<any>();
hClose = i => {
  list[i].show = false;
  emit("handleClose", toRaw(list[i]));
};

let clickEl = tag => {
  emit("handleClick", toRaw(tag));
};
</script>
<style lang="scss" scoped>
.el-tag {
  margin: 2px 2px;
}
.merak_sys_tag.el-tag.hide {
  display: none;
}
</style> 